<template>
	<view class="classify-content">
		<scroll-view scroll-y="true" scroll-with-animation="true" class='scroll1'>
			<view class="left">
				<ul>
					<li @click='handleTitle(item,index)' :class="noIndex==index? 'active2':'active1'" v-for='(item,index) in allData' :key='index'>
						{{ item.title }}
					</li>
				</ul>
			</view>
		</scroll-view>
		<scroll-view scroll-y="true" scroll-with-animation="true" class='scroll2'>
			<view class="right">
				<view class='one'>
					<p>本月精品</p>
					<ul>
						<li @click='goDetail(item)' v-for='(item,index) in rightData.oneData' :key='index'>
							<image class='img' :src="item.img"></image>
							<span>{{ item.name }}</span>
						</li>
					</ul>
				</view>
				<view class='two'>
					<p>猜你喜欢</p>
					<ul>
						<li @click='goDetail(item)' v-for='(item,index) in rightData.twoData' :key='index'>
							<image class='img' :src="item.img"></image>
							<span>{{ item.name }}</span>
						</li>
					</ul>
				</view>
			</view>
		</scroll-view>	
	</view>
</template>

<script>
	import allData from '@/components/json/alldata.json'
	export default{
		data(){
			return{
				noIndex: 0,
				allData: allData,
				rightData: allData[0]
			}
		},
		onLoad(option) {
			if(option.id !== undefined){
				this.noIndex = option.id
				this.rightData = allData[option.id]
			}
		},
		methods:{
			// 左侧按钮切换
			handleTitle(item,index){
				this.noIndex = index
				this.rightData = item
			},
			// 跳转至详情页
			goDetail(item){
				uni.navigateTo({
					url:'/components/cardItems',
					success(res) {
						res.eventChannel.emit('sendDetail', { data: item })
					}
				})
			},
		}
	}
</script>

<style lang='scss'>
.active1{
	font-size: 33rpx;
	border-left: 8rpx solid #F2F2F2;
}
.active2{
	color: #FF6600;
	font-size: 40rpx;
	font-weight: bold;
	border-left: 8rpx solid #FF6600;
}
li{
	list-style-type: none;
}
.classify-content{
	width: 100%;
	height: 100vh;
	background-color: #F2F2F2;
	display: flex;
	.scroll1{
		width: 25%;
		height: 100%;
		.left{
			width: 100%;
			height: 100%;
			box-sizing: border-box;
			padding-top: 30rpx;
			ul{
				padding: 0;
				width: 100%;
				height: 100%;
				box-sizing: border-box;
				li{
					width: 100%;
					height: 120rpx;
					line-height: 120rpx;
					text-align: center;
				}
			}
		}
	}
	.scroll2{
		width: 75%;
		height: 100%;
		.right{
			width: 100%;
			height: 100%;
			.one,.two{
				width: 97%;
				margin: 30rpx 0;
				background-color: white;
				border-radius: 20rpx;
				box-sizing: border-box;
				padding: 30rpx;
				p{
					font-size: 36rpx;
					color: black;
				}
				ul{
					padding: 0;
					width: 100%;
					margin-top: 30rpx;
					display: flex;
					flex-wrap: wrap;
					li{
						width: 33.3%;
						height: 200rpx;
						display: flex;
						flex-wrap: wrap;
						justify-content: center;
						align-content: space-around;
						color: #808080;
						.img{
							width: 100rpx;
							height: 100rpx;
							border-radius: 50%;
						}
					}
				}
			}
		}
	}
}
</style>
